<template>
  <div class="handle" v-loading="loading">
    <el-form :model="list" :rules="rules" ref="list" size="small">
      <div class="form item">
        <div class="title after">
          考评操作
          <div class="back f-r">
            <el-button size="small" @click="$router.go(-1)">返回</el-button>
          </div>
        </div>
        <div class="content after">
          <div class="left" style="width:50%">
            <el-form-item label="标题 : " label-width="100px" prop="title">
              <el-input
                v-model="list.title"
                autocomplete="off"
                placeholder="请输入标题"
                :disabled="!role([0,1],[0])"
              ></el-input>
            </el-form-item>
            <el-form-item label="街道 : " label-width="100px" prop="street_id">
              <el-select
                v-model="list.street_id"
                placeholder="请选择 (搜索 - 清空)"
                style="width:100%"
                filterable
                clearable
                @change="searchVillage"
                :disabled="!role([0,1],[0])"
              >
                <el-option
                  :label="item.title"
                  :value="item.id"
                  v-for="item in streetList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="街道管理员 : " label-width="100px" prop="street_user_name">
              <div class="f-w-b">{{list.street_user_name?list.street_user_name:'请选择街道'}}</div>
            </el-form-item>
            <el-form-item label="村 : " label-width="100px" prop="village_id">
              <el-select
                v-model="list.village_id"
                placeholder="请选择 (搜索 - 清空)"
                style="width:100%"
                filterable
                clearable
                @change="searchVillageUser"
                :disabled="!role([0,1],[0])"
              >
                <el-option
                  :label="item.title"
                  :value="item.id"
                  v-for="item in villageList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="村管理员 : " label-width="100px" prop="village_user_name">
              <div class="f-w-b">{{list.village_user_name?list.village_user_name:'请选择村'}}</div>
            </el-form-item>
          </div>
          <div class="right" style="width:calc(50% - 20px);margin-left:20px">
            <el-form-item label="考评员 : " label-width="100px" prop="user_id">
              <el-select
                v-model="list.user_id"
                placeholder="请选择 (搜索 - 清空)"
                style="width:100%"
                filterable
                clearable
                :disabled="!role([0,1],[0])"
              >
                <el-option
                  :label="item.username"
                  :value="item.id"
                  v-for="item in userList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="考评时间 : " label-width="100px" prop="time">
              <el-date-picker
                v-model="list.time"
                type="date"
                placeholder="请选择时间"
                style="width:100%"
                value-format="yyyy-MM-dd"
                :disabled="!role([0,1],[0])"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="整改限时 : " label-width="100px" prop="expire_time">
              <el-date-picker
                v-model="list.expire_time"
                type="date"
                placeholder="请选择时间"
                style="width:100%"
                value-format="yyyy-MM-dd"
                :disabled="!role([0,1],[0,1,2,3,4,5,6,7])"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="审核员 : " label-width="100px" prop="auditor_id">
              <el-select
                v-model="list.auditor_id"
                placeholder="请选择 (搜索 - 清空)"
                style="width:100%"
                filterable
                :disabled="!role([0,1],[0])"
                clearable
              >
                <el-option
                  :label="item.username"
                  :value="item.id"
                  v-for="item in auditorList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="mt-10 bg-ff pd-10 b-r-5" style="color:#666">细则</div>
      <div class="mt-10 bg-ff b-r-5 after" style="padding:15px 0">
        <div class="left" style="width:300px">
          <el-form-item label="年份 : " label-width="100px" prop="year" style="margin-bottom:0">
            <el-select
              v-model="list.year"
              placeholder="请选择 (搜索 - 清空)"
              style="width:100%"
              filterable
              clearable
              :disabled="list.id?true:false"
              @change="searchPeriod"
            >
              <el-option :label="item" :value="item" v-for="item in yearList" :key="item"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="left" style="width:300px">
          <el-form-item label="期数 : " label-width="100px" prop="period" style="margin-bottom:0">
            <el-select
              v-model="list.period"
              placeholder="请选择 (搜索 - 清空)"
              style="width:100%"
              filterable
              clearable
              :disabled="list.id?true:false"
            >
              <el-option
                :value="'第'+changeIntChar(item)+'期'"
                v-for="item in periodList.period"
                :key="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="note ml-10 f-l" style="line-height:32px;">注 : 提交后,无法修改. 如有问题,请删除后,重新添加</div>
      </div>
      <!-- 标准部分 -->
      <ul class="standard after" v-if="list.standard.length  && list.year">
        <li v-for="(item,index) in list.standard" :key="item.id">
          <div class="title">
            {{index+1}} : {{item.title}}
            <span v-if="user.type!=3 && user.type!=4">({{item.score}}分)</span>
          </div>
          <div class="info">{{item.content}}</div>
          <div class="switch" v-if="role([0,1],[0])">
            <div class="note">开启整改 :</div>
            <el-switch v-model="item.state" active-color="#409EFF" inactive-color="#EAECF0"></el-switch>
          </div>
          <div class="upload" v-if="item.state">
            <div style="display: inline-block;">
              <uploads
                @file="upload"
                :info="index"
                style="padding-top:20px"
                v-if="role([0,1],[0,1,2,3,4,5,6,7,8])"
                :data="{'compress':1,'thumb':1}"
              ></uploads>
            </div>

            <el-button
              type="primary"
              @click="allIssue.list = item;allIssue.show=true"
              class="ml-10"
              style="margin-top: 20px;"
              size="small"
              v-if="role([0,1],[0,1,2,3,4,5,6,7,8])"
            >一键问题设置</el-button>

            <ul class="list after">
              <li v-for="(son,index2) in item.list" :key="item.img_before">
                <div class="clear"></div>
                <div class="left">
                  <div class="img after">
                    <div class="before" @click="img.show=true;img.src=son.img_before">
                      <div :style="{backgroundImage:'url('+ son.img_before_thumb +')'}"></div>
                      <span>{{son.img_before_title}}</span>
                    </div>
                    <span>
                      <i class="fa fa-arrows-h"></i>
                    </span>
                    <div
                      class="after"
                      v-if="son.img_after"
                      @click="img.show=true;img.src=son.img_after"
                      :style="{backgroundImage:'url('+ son.img_after_thumb +')'}"
                    >
                      <div
                        class="del fa fa-trash-o"
                        @click.stop="delAfter(son)"
                        v-if="role([0,1,3,4],[0,1,2,3,4,5,6,7,8]) && !timeout(expire_time)"
                      ></div>
                    </div>

                    <div class="after" v-else>
                      <upload
                        html="<span class='el-icon-plus avatar-uploader-icon'></span>"
                        @downFile="afterImg"
                        :disabled="!role([0,1,3,4],[0,1,2,3,4,5,6,7,8]) || timeout(expire_time)"
                        :info="{index:index,index2:index2}"
                        :data="{'compress':1,'thumb':1}"
                      ></upload>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="title after">
                    <div class="left">序号 : {{index2+1}}</div>
                    <div class="right">
                      <span class="f-l">
                        <!-- {{son.issue}} -->
                        <el-select
                          v-model="son.issue"
                          placeholder="请选择 (搜索 - 清空)"
                          filterable
                          size="small"
                          style="width:100%"
                          clearable
                          :disabled="!role([0,1],[0,1,2,3,4,5,6,7])"
                        >
                          <el-option
                            :label="item"
                            :value="item"
                            v-for="(item,index) in initIssueList(item)"
                            :key="index"
                          ></el-option>
                        </el-select>
                      </span>
                      <span></span>
                      <span>
                        <!-- 阶段0,3  考评员和审核员备注 -->
                        <i
                          class="fa fa-pencil"
                          @click="initIssue(index,index2,item)"
                          v-if="role([0,1,2],[0,3])"
                        ></i>
                        <!-- 阶段2,5 街道和村管理员备注-->
                        <i
                          class="fa fa-pencil"
                          @click="initIssue(index,index2,item)"
                          v-if="role([0,3,4],[1,2])  && !timeout(expire_time)"
                        ></i>
                        <!-- 删除 -->
                        <i
                          class="fa fa-trash"
                          @click="delIssue(index2,item)"
                          v-if="role([1],[0,1,2,3,4,5,6,7,8])"
                        ></i>
                        <!-- 管理员特殊权限 删除 -->
                        <i
                          class="fa fa-trash"
                          @click="delIssue(index2,item)"
                          v-if="role([0],[0,1,2,3,4,5,6,7,8])"
                        ></i>
                      </span>
                    </div>
                  </div>
                  <div class="info">
                    <div class="item after">
                      <p>
                        <span>考评员 :</span>
                        {{son.info_before}}
                      </p>
                      <p v-if="son.info_before">
                        <el-popover
                          placement="top"
                          width="200"
                          trigger="hover"
                          :content="son.info_before"
                        >
                          <i class="fa fa-info-circle c-p" slot="reference"></i>
                        </el-popover>
                      </p>
                    </div>
                    <div class="item after" v-if="role([0,1,2,3,4],[1,2,3,4,5,6,7,8])">
                      <p>
                        <span>问题反馈 :</span>
                        <span class="f-w-b" style="color:#f40">{{son.info_after}}</span>
                      </p>
                      <p v-if="son.info_after">
                        <el-popover
                          placement="top"
                          width="200"
                          trigger="hover"
                          :content="son.info_after"
                        >
                          <i class="fa fa-info-circle c-p" slot="reference"></i>
                        </el-popover>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="clear"></div>
                <div class="check" v-if="role([0,1,2,3,4],[4,5,6,7,8])">
                  <br />
                  <div class="group after">
                    <div class="f-l">
                      <el-radio-group
                        v-model="son.check_state"
                        size="small"
                        :disabled="!role([0,1,2,3,4],[4,5,6])"
                      >
                        <el-radio-button :label="0">通过</el-radio-button>
                        <el-radio-button :label="1">不通过</el-radio-button>
                      </el-radio-group>
                      <span class="ml-10 f40" v-if="son.check_state">整改不通过</span>
                    </div>
                  </div>
                  <div class="state">
                    <el-input
                      autocomplete="off"
                      placeholder="原因"
                      size="small"
                      v-model="son.check_info"
                      v-if="son.check_state==1"
                      :disabled="!role([0,1,2,3,4],[4,5,6])"
                      class="mt-10"
                    ></el-input>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="score after">
            <div class="left" v-if="user.type!=3 && user.type!=4">
              <div class="before">
                扣分 :
                <span class="mr-10">{{item.before_score}}</span>
                得分 :
                <span
                  class="mr-10"
                >{{item.score - item.before_score}}</span>
                <!-- 修改得分 -->
                <i
                  class="fa fa-pencil ml-10 c-p"
                  @click="setScore(item)"
                  v-if="role([0,1],[0,1,2,3,4,5,6,7,8])"
                ></i>
              </div>
            </div>
            <div class="right">
              问题 :
              <span>{{issueSum(item,1)[0]}}</span>
              整改 :
              <span>{{issueSum(item,1)[1]}}</span>
            </div>
          </div>
        </li>
      </ul>
      <div class="empty bg-ff pd-10 t-c b-r-5 mt-10" v-else>暂时没有细则</div>
      <div class="mt-10 footer">
        <div class="score bg-ff pd-10 b-r-5 after">
          <div class="left" v-if="user.type!=3 && user.type!=4">
            总分 :
            <span>{{calculateSum()[0]}}</span>
            总得分 :
            <span>{{calculateSum()[1]}}</span>
          </div>
          <div class="right">
            总问题 :
            <span>{{issueSum(list,0)[0]}}</span>
            总整改 :
            <span>{{issueSum(list,0)[1]}}</span>
          </div>
        </div>
        <!-- 添加 -->
        <div class="bg bg-ff pd-10 mt-10 b-r-5 after" v-if="!$route.query.id">
          <el-button type="primary" @click="submit()" size="small">保 存</el-button>
          <el-button type="primary" @click="list.state = 1;submit()" size="small">提交整改</el-button>
          <el-button size="small" @click="$router.go(-1)">返 回</el-button>
        </div>
        <!-- 修改 -->
        <div class="bg bg-ff pd-10 mt-10 b-r-5 after" v-else>
          <template v-if="!timeout(expire_time)">
            <!-- 考评员 -->
            <span v-if="user.type==1">
              <!-- 阶段0,1,2,3,4,5,6,7 保存 -->
              <el-button type="primary" @click="submit()" size="small">保 存</el-button>
              <!-- 阶段0,3 -->
              <el-button
                type="primary"
                @click="list.state = 1;submit()"
                size="small"
                v-if="role([1],[0,3])"
              >提交整改</el-button>

              <!-- 阶段4 -->
              <el-button
                type="primary"
                @click="list.state = 5;submit()"
                size="small"
                v-if="role([1],[4])"
              >提交审核</el-button>
              <el-button
                type="danger"
                @click="list.state = 7;submit()"
                size="small"
                v-if="state==4"
              >不通过</el-button>
            </span>
            <!-- 审核员 -->
            <span v-if="user.type==2">
              <!-- 阶段6 保存 -->
              <el-button type="primary" @click="submit()" size="small" v-if="state==6">保 存</el-button>
              <!-- 阶段6 保存 -->
              <el-button
                type="primary"
                @click="list.state = 8;submit()"
                size="small"
                v-if="role([2],[6])"
              >结 束</el-button>
              <el-button
                type="danger"
                @click="list.state = 7;submit()"
                size="small"
                v-if="state==6"
              >不通过</el-button>
            </span>
            <!-- 街道管理员 -->
            <span v-if="user.type==3">
              <!-- 阶段2,5 保存 -->
              <el-button
                type="primary"
                @click="submit()"
                size="small"
                v-if="state==2 || state==5"
              >保 存</el-button>
              <!-- 阶段5 -->
              <el-button
                type="primary"
                @click="list.state = 6;submit()"
                size="small"
                v-if="state==5"
              >提交审核</el-button>
              <el-button
                type="danger"
                @click="list.state = 7;submit()"
                size="small"
                v-if="state==5"
              >不通过</el-button>

              <!-- 阶段2 -->
              <el-button
                type="primary"
                @click="list.state = 1;submit()"
                size="small"
                v-if="state==2"
              >提交整改</el-button>
              <el-button
                type="danger"
                @click="list.state = 3;submit()"
                size="small"
                v-if="state==2"
              >退回考评</el-button>
            </span>
            <!-- 村管理员和街道管理员 -->
            <span v-if="user.type==4    || user.type==3">
              <!-- 阶段1,3,7保存 -->
              <el-button
                type="primary"
                @click="submit()"
                size="small"
                v-if="(state==1 || state==3 || state==7) && !timeout(expire_time)"
              >保 存</el-button>
              <!-- 阶段1和3 -->
              <el-button
                type="primary"
                @click="list.state = 4;submit()"
                size="small"
                v-if="role([3,4],[1,3]) && !timeout(expire_time)"
              >提交审核</el-button>
              <el-button
                type="danger"
                @click="list.state = 2;submit()"
                size="small"
                v-if="state==1 && !timeout(expire_time)"
              >退回街道</el-button>

              <!-- 阶段7 -->
              <el-button
                type="primary"
                @click="list.state = 4;submit()"
                size="small"
                v-if="role([3,4],[7]) && !timeout(expire_time)"
              >提交审核</el-button>
            </span>
          </template>

          <!-- 超时 -->
          <template v-else-if="timeout(expire_time) && state!=8">
            <div class="note f-l mr-10" style="line-height:33px">整改已超时!</div>
            <el-button type="primary" @click="submit()" size="small" v-if="user.type==1">保 存</el-button>
            <el-button
              type="primary"
              @click="list.state = 8;submit()"
              size="small"
              v-if="user.type==1"
            >结 束</el-button>
          </template>

          <!-- 管理员特殊权限 -->
          <template v-if="user.type==0">
            <el-button type="primary" @click="submit()" size="small">保 存</el-button>
          </template>
          <!-- 大家都有 -->
          <el-button size="small" @click="$router.go(-1)" class="ml-10">返 回</el-button>
        </div>
      </div>
    </el-form>
    <!-- 图片预览 -->
    <el-dialog title="操作" :visible.sync="img.show" width="50%" class="img-show">
      <img :src="img.src" alt />
      <div class="down" @click="img.show = false;img.src=''">
        <i class="fa fa-times"></i>
      </div>
    </el-dialog>

    <!-- 问题详情 -->
    <el-dialog title="操作" :visible.sync="issue.show" width="30%">
      <el-form :model="issue.list" :rules="issue.rules" ref="issue.list" size="small">
        <el-form-item label="问题反馈 : " label-width="100px" v-if="role([0,1],[0,3])">
          <el-input
            autocomplete="off"
            placeholder="请输入内容"
            size="small"
            type="textarea"
            v-model="issue.list.info_before"
          ></el-input>
        </el-form-item>
        <el-form-item label="问题反馈 : " label-width="100px" v-if="role([0,3,4],[1,2])">
          <el-input
            autocomplete="off"
            placeholder="请输入内容"
            size="small"
            type="textarea"
            v-model="issue.list.info_after"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitIssue()" size="small">提 交</el-button>
        <el-button size="small" @click="issue.show=false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 一键设置问题 -->
    <el-dialog title="操作" :visible.sync="allIssue.show" width="30%">
      <el-form :model="allIssue.list" ref="allIssue.list" size="small">
        <el-form-item label="问题列表 : " label-width="100px">
          <el-select
            v-model="allIssue.value"
            placeholder="请选择 (搜索 - 清空)"
            filterable
            size="small"
            style="width:100%"
            clearable
          >
            <el-option
              :label="item"
              :value="item"
              v-for="(item,index) in initIssueList(allIssue.list)"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitAllIssue()" size="small">提 交</el-button>
        <el-button size="small" @click="allIssue.show=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import uploads from "@/components/other/uploads.vue";
import upload from "@/components/other/upload.vue";
export default {
  components: {
    uploads,
    upload
  },
  data() {
    return {
      list: {
        title: "",
        street_id: "",
        village_id: "",
        user_id:
          this.$store.state.user.id != 1 ? this.$store.state.user.id : "",
        auditor_id: "",
        time: "",
        expire_time: "",
        year: "",
        period: "",
        street_user_name: "",
        village_user_name: "",
        standard: [],
        after_score: 0
      },
      // 一键问题设置
      allIssue: {
        show: false,
        list: [],
        value: ""
      },
      // 状态
      state: 0,
      // 表单验证
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        street_id: [{ required: true, message: "请选择街道", trigger: "blur" }],
        village_id: [{ required: true, message: "请选择村", trigger: "blur" }],
        street_user_name: [
          { required: true, message: "街道管理员不能为空", trigger: "blur" }
        ],
        village_user_name: [
          { required: true, message: "村管理员不能为空", trigger: "blur" }
        ],
        user_id: [{ required: true, message: "请选择考评员", trigger: "blur" }],
        auditor_id: [
          { required: true, message: "请选择审核员", trigger: "blur" }
        ],
        time: [{ required: true, message: "请选择考评时间", trigger: "blur" }],
        expire_time: [
          { required: true, message: "请选择整改限时", trigger: "blur" }
        ],
        year: [{ required: true, message: "请选择年份", trigger: "blur" }],
        period: [{ required: true, message: "请选择期数", trigger: "blur" }]
      },
      // 用户信息
      user: this.$store.state.user,
      // 问题
      issue: {
        show: false,
        list: {
          issue: "",
          issueList: [],
          info_before: "",
          info_after: ""
        },
        // 验证
        rules: {
          issue: [{ required: true, message: "请选择问题", trigger: "blur" }]
        }
      },
      // 得分
      score: {
        show: false,
        list: {}
      },

      // 整改限时
      expire_time: "",
      // 图片预览
      img: {
        show: false,
        src: ""
      },
      // 街道列表
      streetList: [],
      // 村列表
      villageList: [],
      // 考评员
      userList: [],
      // 审核员
      auditorList: [],
      // 年份
      yearList: [],
      // 期数
      periodList: [],
      loading: false
    };
  },
  methods: {
    // 数字转字符串 1 -> 一
    changeIntChar(i) {
      var c = ["", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
      return c[i];
    },
    // 设置一键问题
    submitAllIssue() {
      var v = this.allIssue.value,
        list = this.allIssue.list;
      if (!v) {
        this.common.message({ type: "error", message: "问题不能为空" });
        return false;
      }
      for (var i in list.list) {
        list.list[i].issue = v;
      }
      this.allIssue.show = false;
      this.allIssue.value = "";
      this.allIssue.list = "";
      this.common.message({ message: "设置成功" });
    },
    // 计算问题数量和上传图片数量还有未通过数量
    issueSum(item, state) {
      var sum = [0, 0];
      if (state) {
        // 计算单个标准数量
        var list = item.list;
        for (var i in list) {
          sum[0]++;
          // 计算已上传图片的
          if (list[i].img_after && !list[i].check_state) {
            sum[1]++;
          }
        }
      } else {
        // 计算总标准数量
        for (var j in item.standard) {
          var list = item.standard[j].list;
          for (var i in list) {
            sum[0]++;
            // 计算已上传图片,并且通过的
            if (list[i].img_after && !list[i].check_state) {
              sum[1]++;
            }
          }
        }
      }
      return sum;
    },
    // 设置标准扣分
    setScore(item) {
      this.$prompt("请输入扣分,默认 0", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^\d+(\.\d+)?$/,
        inputValidator: function(value) {
          value = parseFloat(value);
          if (value > item.score) {
            return "分数已超,请检查,最高分为 : " + item.score;
          }
        },
        inputErrorMessage: "只能输入整数或者小数"
      }).then(({ value }) => {
        value = parseFloat(value);
        // 整改前
        item.before_score = value;
      });
    },
    // 整改是否超时
    timeout(time) {
      var day = moment().format("YYYY-MM-DD");
      if (new Date(day).getTime() > new Date(time).getTime()) {
        return true;
      } else {
        return false;
      }
    },
    // 筛选权限
    role(type, state) {
      var ref = false,
        user = this.user,
        list = this.list;
      if (type.indexOf(user.type) != -1 && state.indexOf(this.state) != -1) {
        ref = true;
      }
      return ref;
    },
    // 添加考评标准问题图片
    addIssue(id, list) {
      var data = {
        T: "issue",
        list: []
      };
      for (var i in list) {
        for (var j in list[i]["list"]) {
          var item = { ...list[i]["list"][j] };
          item.choose_standard_id = id[i];
          data.list.push(item);
        }
      }
      return this.axios.post("/admin/Index/handle", data);
    },
    // 添加考评标准
    addStandard(id, list) {
      var data = {
        T: "choose_standard",
        list: []
      };
      for (var i in list) {
        var item = list[i],
          issue = item.issue;
        if (typeof issue != "string") {
          issue = issue.join(",");
        }
        data.list.push({
          id: item.id,
          title: item.title,
          content: item.content,
          score: item.score,
          after_score: item.after_score,
          before_score: item.before_score,
          issue: issue,
          evaluate_id: id,
          state: item.state ? 1 : 0
        });
      }
      return this.axios.post("/admin/Index/handle", data);
    },
    // 添加考评
    addEvaluate(list) {
      var data = { ...list };
      data["T"] = "evaluate";
      // 删除相关属性
      delete data.period_obj;
      delete data.standard;
      delete data.street;
      delete data.street_user_name;
      return this.axios.post("/admin/Index/handle", data);
    },
    // 验证图片问题内容是否为空
    checkIssue(list) {
      var list = list.standard,
        ref = { state: 1 };
      // 当为空的时候
      if (!list.length) {
        return { state: 0, info: "细则不能为空" };
      }
      for (var i in list) {
        var item = list[i];
        for (var j in item["list"]) {
          var son = item["list"][j];
          if (!son.issue) {
            ref.state = 0;
            ref.info =
              item.title +
              "下 , 序号 : " +
              (parseInt(j) + 1) +
              " , 问题不能为空";
            return ref;
          }
        }
      }
      return ref;
    },
    submit() {
      this.$refs["list"].validate(valid => {
        if (valid) {
          var list = { ...this.list };
          // 检测上传图片分数和问题是否填写
          var ref = this.checkIssue(list);
          if (!ref.state) {
            this.common.message({ type: "error", message: ref.info });
            return false;
          }
          this.loading = true;
          delete list.score; //删除多余的属性
          // 添加考评
          this.addEvaluate(list).then(ref => {
            var ref = ref.data;
            if (ref.state) {
              var id = ref.other.id[0],
                info = ref.info;
              if (list.id) {
                var id = list.id;
              }
              // 添加考评标准
              this.addStandard(id, list.standard).then(ref => {
                var ref = ref.data;
                if (ref.state) {
                  var id = ref.other.id,
                    n = 0;
                  // 读取需要不需要添加考评问题
                  for (var i in list.standard) {
                    for (var j in list.standard[i]["list"]) {
                      n = 1;
                    }
                  }
                  if (n) {
                    // 添加考评问题
                    this.addIssue(id, list.standard).then(ref => {
                      var ref = ref.data;
                      if (ref.state) {
                        this.common.message({ message: info });
                        var that = this;
                        setTimeout(function() {
                          that.loading = false;
                          that.$router.go(-1);
                        }, 1000);
                      }
                    });
                  } else {
                    this.common.message({ message: info });
                    var that = this;
                    setTimeout(function() {
                      that.loading = false;
                      that.$router.go(-1);
                    }, 1000);
                  }
                }
              });
            }
          });
        }
      });
    },
    // 计算总分、总得分和总整改率
    calculateSum() {
      var list = this.list.standard,
        sum = 0,
        before = 0;
      // 计算总分
      for (var i in list) {
        sum = sum + list[i].score;
        before = before + list[i].before_score;
      }
      return [sum, sum - before];
    },
    // 删除图片问题
    delIssue(index, item) {
      this.common.confirm().then(() => {
        var data = {
          id: [item.list[index].id],
          T: "issue"
        };
        this.axios.post("/admin/Index/del", data).then(ref => {
          var ref = ref.data;
          if (ref.state) {
            item.list.splice(index, 1);
            this.common.message({ message: ref.info });
          } else {
            this.common.message({ message: ref.info, type: "error" });
          }
        });
      });
    },
    // 删除整改后照片
    delAfter(son) {
      this.common.confirm().then(() => {
        var data = [son.img_after, son.img_after_thumb];
        son.img_after = "";

        this.common.message({ message: '删除成功' });
        // this.axios.post("/admin/Index/del_file", data).then(ref => {
        //   var ref = ref.data;
        //   if (ref.state) {
        //     this.common.message({ message: ref.info });
        //   } else {
        //     this.common.message({ message: ref.info, type: "error" });
        //   }
        // });
      });
    },
    // 上传整改后图片
    afterImg(img) {
      var path = img.file.path,
        thumb_path = img.file.thumb_path,
        index = img.file.info.index,
        index2 = img.file.info.index2;
      this.list.standard[index].list[index2].img_after_thumb = thumb_path;
      this.list.standard[index].list[index2].img_after = path;
    },
    // 修改描述
    submitIssue() {
      this.$refs["issue.list"].validate(valid => {
        if (valid) {
          var list = this.issue.list,
            item = this.list.standard[list.index].list[list.index2];
          item.issue = list.issue;
          item.info_before = list.info_before;
          item.info_after = list.info_after;
          this.issue.show = false;
        }
      });
    },
    // 初始化问题描述
    initIssueList(item) {
      if (typeof item.issue == "string") {
        item.issue = item.issue.split(",");
      }
      return item.issue;
    },
    // 初始化描述
    initIssue(index, index2, item) {
      var issue = this.issue;
      issue.show = true;
      if (typeof item.issue == "string") {
        item.issue = item.issue.split(",");
      }
      issue.list.issueList = item.issue;
      issue.list.index2 = index2;
      issue.list.index = index;
      issue.list.issue = item.list[index2].issue;
      issue.list.info_before = item.list[index2].info_before;
      issue.list.info_after = item.list[index2].info_after;
    },
    // 上传
    upload(file) {
      var list = file.list,
        index = file.info;
      for (var i in list) {
        var title = list[i].title.split(".");
        title.length = title.length - 1;
        this.list.standard[index].list.push({
          img_before: list[i].path,
          img_before_thumb: list[i].thumb_path,
          img_before_title: title.join("."),
          img_after_thumb: "",
          img_after: "",
          issue: "",
          info_before: "",
          info_after: ""
        });
      }
    },
    // 搜索标准
    searchStandard(item) {
      var data = {
        year_period_id: item.id
      };
      this.axios.post("/admin/Index/search_standard", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          var data = ref.other.data;
          for (var i in data) {
            delete data[i].id;
            data[i]["state"] = false;
            data[i]["list"] = [];
            data[i]["after_score"] = 0;
            data[i]["before_score"] = 0;
            data[i]["issue"] = data[i]["issue"].split(",");
          }
          this.list.standard = data;
        }
      });
    },
    // 搜索期数
    searchPeriod(year, empty = true) {
      // 清空期数
      if (empty) {
        this.list.period = "";
        this.list.period_obj = "";
      }
      if (!year) {
        this.periodList = [];
        return false;
      }
      var data = {
        year: year
      };
      this.axios.post("/admin/Index/search_year_period", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.periodList = ref.other.data[0];

          // 搜索标准
          if (!this.list.id) {
            this.searchStandard(this.periodList);
          }
        }
      });
    },
    // 搜索年份
    searchYear() {
      this.axios.post("/admin/Index/search_year_period").then(ref => {
        var ref = ref.data;
        if (ref.state) {
          var data = ref.other.data,
            year = [];
          for (var i in data) {
            if (year.indexOf(data[i].year) == -1) {
              year.push(data[i].year);
            }
          }
          this.yearList = year;
        }
      });
    },
    // 搜索审核员
    searchAuditor() {
      var data = {
        type: 2
      };
      this.axios.post("/admin/Index/search_user", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.auditorList = ref.other.data;
          // this.list.auditor_id = this.auditorList[0].id;
        }
      });
    },
    // 搜索考评员
    searchUser() {
      var data = {
        type: 1
      };
      this.axios.post("/admin/Index/search_user", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.userList = ref.other.data;
        }
      });
    },
    // 搜索街道
    searchStreet() {
      this.axios.post("/admin/Index/search_street").then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.streetList = ref.other.data;
        }
      });
    },
    // 搜索村管理员
    searchVillageUser(id) {
      // 设置街道管理员名称
      for (var i in this.villageList) {
        if (this.villageList[i].id == id) {
          this.list.village_user_name = this.villageList[i].user_name;
          break;
        }
      }
    },
    // 搜索村
    searchVillage(id) {
      if (!id) {
        this.villageList = [];
        return false;
      }
      // 设置街道管理员名称
      for (var i in this.streetList) {
        if (this.streetList[i].id == id) {
          this.list.street_user_name = this.streetList[i].user_name;
          break;
        }
      }
      this.list.street_id = id;
      this.list.village_id = "";
      var data = {
        street_id: id
      };
      this.axios.post("/admin/Index/search_village", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.villageList = ref.other.data;
        }
      });
    },

    // 搜索
    searchHandle() {
      if (!this.$route.query.id) {
        this.searchStreet();
        this.searchUser();
        this.searchAuditor();
        this.searchYear();
        return false;
      }
      var data = {
        id: this.$route.query.id
      };
      this.loading = true;
      this.axios.post("/admin/Index/search_evaluate", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          var data = ref.other.data[0];
          data["period_obj"] = {
            period: data["period"]
          };
          for (var i in data["standard"]) {
            var item = data["standard"][i];
            item.state = item.state ? true : false;
            var arr = [];
            for (var j in item.list) {
              if (!item.list[j].state) {
                arr.push(item.list[j]);
              }
            }
            item.list = arr;
          }
          this.searchPeriod(data["year"], false);
          this.searchVillage(data["street_id"]);
          this.list = data;
          this.state = data["state"];
          this.expire_time = data["expire_time"];

          this.searchStreet();
          this.searchUser();
          this.searchAuditor();
          this.searchYear();
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
        this.loading = false;
      });
    }
  },
  created() {
    this.searchHandle();
  }
};
</script>
<style scoped>
/* 标准部分 */
.standard > li {
  background-color: #fff;
  margin-top: 10px;
  padding: 20px;
  border-radius: 5px;
}
.standard > li > .title {
  font-weight: bold;
  font-size: 16px;
}
.standard > li > .title > span {
  color: #f40;
  margin-left: 20px;
  font-size: 16px;
}
.standard > li > .info {
  margin: 20px 0;
  line-height: 25px;
  color: #666;
}
.standard > li > .switch .note {
  color: #666;
}
.standard > li > .switch .note {
  color: #666;
}
.standard > li > .switch .el-switch {
  margin: 10px 0;
}
.standard > li > .upload {
  border-top: 1px solid #f3f5f7;
}
.standard > li > .upload .list {
  padding-top: 20px;
}
.standard > li > .upload .list > li {
  width: calc(50% - 20px);
  margin-right: 40px;
  float: left;
}
.standard > li > .upload .list > li:nth-of-type(n + 3) {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}
.standard > li > .upload .list > li:nth-of-type(2n) {
  margin-right: 0px;
}
.standard > li > .upload .list > li:after {
  content: "";
  clear: both;
  display: block;
}
.standard > li > .upload .list > li > .audit {
  margin-bottom: 20px;
}
.standard > li > .upload .list > li > .audit .note {
  float: left;
  line-height: 32px;
  font-size: 14px;
  color: #666;
}
.standard > li > .upload .list > li > .audit .state {
  float: right;
}

.standard > li > .upload .list > li > .left > .img {
  float: left;
}
.standard > li > .upload .list > li > .left > .img .before {
  float: left;
}
.standard > li > .upload .list > li > .left > .img .before div {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px;
  cursor: pointer;
}
.standard > li > .upload .list > li > .left > .img .before span {
  display: block;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
  font-weight: bold;
  width: 100px;
}
.standard > li > .upload .list > li > .left > .img .after {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px;
  cursor: pointer;
}
.standard > li > .upload .list > li > .left > .img > span {
  float: left;
  line-height: 100px;
  border-radius: 0px;
  border: 0px;
  width: 70px;
  text-align: center;
  font-size: 30px;
  cursor: unset;
}
.standard > li > .upload .list > li > .left > .img .after {
  position: relative;
  text-align: center;
}
.standard > li > .upload .list > li > .left > .img .after >>> .upload {
  margin-left: 0 !important;
  width: 100%;
}
.standard
  > li
  > .upload
  .list
  > li
  > .left
  > .img
  .after
  >>> .upload
  .el-upload {
  width: 100%;
}

.standard > li > .upload .list > li > .left > .img .after >>> .el-icon-plus {
  color: #666;
  font-size: 25px;
  line-height: 100px;
  display: block;
}
.standard > li > .upload .list > li > .left > .img .after >>> .del {
  position: absolute;
  right: 5px;
  top: 5px;
  color: #fff;
  font-size: 18px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
  cursor: pointer;
}
.standard > li > .upload .list > li > .right {
  width: calc(100% - 294px);
}
.standard > li > .upload .list > li > .right > .title > .left {
  font-weight: bold;
  font-size: 14px;
}
.standard > li > .upload .list > li > .right > .title > .right span {
  font-weight: bold;
}
.standard
  > li
  > .upload
  .list
  > li
  > .right
  > .title
  > .right
  span:nth-of-type(2) {
  color: #f40;
  margin-left: 10px;
}
.standard
  > li
  > .upload
  .list
  > li
  > .right
  > .title
  > .right
  span:nth-of-type(3) {
  font-size: 0;
}
.standard > li > .upload .list > li > .right > .title > .right i {
  cursor: pointer;
  margin-left: 10px;
  font-size: 14px;
}
.standard
  > li
  > .upload
  .list
  > li
  > .right
  > .title
  > .right
  i:nth-of-type(2) {
  color: #f40;
}
.standard > li > .upload .list > li > .right > .info {
  margin-top: 20px;
}
.standard > li > .upload .list > li > .right > .info .item {
  padding: 0px;
  padding-right: 20px;
  position: relative;
  background-color: transparent;
  line-height: 25px;
  margin-bottom: 5px;
}
.standard > li > .upload .list > li > .right > .info .item p {
  margin: 0;
  float: left;
}
.standard > li > .upload .list > li > .right > .info .item p:nth-of-type(1) {
  color: #666;
  font-size: 12px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.standard
  > li
  > .upload
  .list
  > li
  > .right
  > .info
  .item
  p:nth-of-type(1)
  span {
  color: #333;
  font-size: 12px;
}
.standard > li > .upload .list > li > .right > .info .item p:nth-of-type(2) {
  font-size: 20px;
  position: absolute;
  right: 0;
  cursor: pointer;
}
.standard > li > .upload .list > li > .right > .info .item p:nth-of-type(2) i {
  font-size: 16px;
}
.standard > li > .upload .list > li > .right > .info .input-del .el-input {
  width: calc(100% - 75px);
  float: left;
  margin-right: 10px;
}
.standard > li > .score {
  margin-top: 15px;
}
.standard > li > .score * {
  font-weight: bold;
  font-size: 16px;
}
.standard > li > .score .left > div {
  float: left;
  margin-right: 50px;
}

.standard > li > .score span {
  color: #f40;
}
.standard > li > .score .right span {
  margin-right: 20px;
}
/* 底部 */
.handle .footer {
  margin-bottom: 50px;
}
.handle .footer .score * {
  font-size: 18px;
  font-weight: bold;
}
.handle .footer .score span {
  color: #f40;
  font-size: 18px;
  font-weight: bold;
  margin-right: 20px;
}
/* 空 */
.handle .empty {
  padding: 20px;
  color: #666;
  font-size: 18px;
}
/* 图片展示 */
.img-show >>> .el-dialog {
  border-radius: 5px;
  overflow: hidden;
}
.img-show >>> .el-dialog__body {
  position: relative;
  font-size: 0;
  padding: 0 !important;
  text-align: center;
}
.img-show >>> .el-dialog__header {
  display: none;
}

.img-show >>> .down {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
}
</style>